<template>
  <el-menu-item :index="menu.id + ''" :route="theRoute" v-if="menu.menuType === 'Menu'">
    <i class="icon-style" :class="menu.icon" style="width: 20px"></i>
    <span slot="title">{{menu.menuName}}</span>
  </el-menu-item>

  <!--<li class="el-menu-item" v-else-if="menu.type === 'menuitem' && menu.action === 'message'" @click="sendMessage(menu)">-->
    <!--<i class="icon-style" :class="menu.icon"></i>-->
    <!--<span slot="title">{{menu.title}}</span>-->
  <!--</li>-->

  <el-submenu :index="menu.id + ''" v-else-if="menu.menuType === 'Catalogue'">
    <template slot="title">
      <i class="icon-style" :class="menu.icon" style="width: 20px"></i>
      <span slot="title">{{menu.menuName}}</span>
    </template>

    <sub-menu :menu="sub" v-for="sub in menu.children" :key="sub.id"></sub-menu>
  </el-submenu>

</template>
<script>
export default {
  name: "subMenu",
  props: {
    menu: Object
  },
  created() {},
  mounted() {},
  data() {
    return {};
  },
  computed: {
    theRoute() {
      return JSON.parse(this.menu.route);
    }
  },
  methods: {
    sendMessage(menu) {
      console.log(menu);
    }
  },
  components: {}
};
</script>
<style scoped>
.icon-style {
  margin-right: 15px;
  font-size: 18px;
}
</style>
